<template>
  <div>
    <span>
    用户名：
    <input type="text" v-model.lazy="name" />
    </span>
    <span>{{tip}}</span>
  </div>
</template>
<script>
  import {setup,ref,watch} from "vue"
  export default{
    setup(){
      const name=ref("")
      const tip=ref("")
      watch(name,(newValue,oldValue)=>{
        console.log(`旧值是:${oldValue},新值是:${newValue}`)
        setTimeout(function () {
          if (newValue=="admin") {
            tip.value="用户名已经存在，请更换一个"
          }else{
            tip.value="用户名可以使用"
          }
        }, 1000);
      })
      return {
        name,
        tip
      }
    }
  }
</script>